<!--
 * @Author: “ChengNan” 1429323234@qq.com
 * @Date: 2024-06-07 15:32:53
 * @LastEditors: “ChengNan” 1429323234@qq.com
 * @LastEditTime: 2024-06-20 17:32:58
 * @FilePath: /src/views/7.routerDO/routerDO.vue
 * @Description: 路由的跳转
-->
<template>
  <div>
    <h1>常用路由的跳转与参数获取</h1>

    <h3 ref="h3_1">1. 使用$route.query获取参数</h3>
    <pre>
      <code class="language-javascript">
        this.$router.push({ path: '/routerDO/child1', query: { name: '张三' } })
      </code>
    </pre>

    <h3 ref="h3_2">2. 使用$route.params获取参数</h3>
    <pre>
      <code class="language-javascript">
        this.$router.push({ name: 'child2', params: { name: '李四' } })
      </code>
    </pre>

    <h3 ref="h3_3">3. 新页面</h3>
    <h3 ref="h3_4">4. 传递对象参数 { alias: '王五', info: { as: '1'}} </h3>
    <h3 ref="h3_5">5. 案例</h3>
    <hr>

    <pre>
      <code class="language-javascript">
        {{ `RouterView` }}
      </code>
    </pre>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'routerDO',
  mounted() {
    window.hljs.highlightAll()

    // 使用$route获取参数
    // path => query
    // name => params

    this.$refs['h3_1'].addEventListener('click', () => {
      this.$router.push({
        path: '/routerDO/child1',
        query: { name: '张三' }
      })
    })
    this.$refs['h3_2'].addEventListener('click', () => {
      this.$router.push({
        name: 'Child2',
        params: { name: '李四' }
      })
    })
    this.$refs['h3_3'].addEventListener('click', () => {
      this.$router.push({ path: '/child3', query: { name: '王五' } })
    })
    this.$refs['h3_4'].addEventListener('click', () => {
      this.$router.push({ path: '/child3', query: { name: { alias: '王五', info: { as: '1'}} } })
      // this.$router.push({ path: '/child3', query: { name: JSON.stringify({ alias: '王五', info: { as: '1'}}) } })
    })
    this.$refs['h3_5'].addEventListener('click', () => {
      this.$router.push({ path: '/child4' })
    })

    let query = {
      a: {},
      b: {},
    }

    for (const key in query) {
      console.log(new String(query[key]).toString());
    }
  },
}
</script>

<style lang="scss" scoped></style>